<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2021-11-27
  Time: 21:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>首页</title>
    <meta name="keywords" content="首页"/>
    <meta name="description" content="首页"/>
    <link rel="stylesheet" type="text/css" href="../css/normalize.css"/>
    <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
    <script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var showproduct = {
                "boxid": "showbox",
                "sumid": "showsum",
                "boxw": 400,//宽度,该版本中请把宽高填写成一样
                "boxh": 400,//高度,该版本中请把宽高填写成一样
                "sumw": 60,//列表每个宽度,该版本中请把宽高填写成一样
                "sumh": 60,//列表每个高度,该版本中请把宽高填写成一样
                "sumi": 7,//列表间隔
                "sums": 5,//列表显示个数
                "sumsel": "sel",
                "sumborder": 1,//列表边框，没有边框填写0，边框在css中修改
                "lastid": "showlast",
                "nextid": "shownext"
            };//参数定义
            $.ljsGlasses.pcGlasses(showproduct);//方法调用，务必在加载完后执行
        });
    </script>
</head>
<style>
    .mmm {
        float: left;
        font-size: 14px;
        line-height: 40px;
        padding-right: 20px;
        color: #848484;
        display: flex;
        flex-direction: column;
    }
</style>
<body>
<div class="showall">
    <!--left -->
    <div class="showbot">
        <div id="showbox">
            <img src="../images/${product.photo}" width="400" height="400"/>
            <img src="../img/m1.jpg" width="300" height="300"/>
            <img src="../img/m2.jpg" width="300" height="300"/>
            <img src="../img/m3.jpg" width="300" height="300"/>
            <img src="../img/m4.jpg" width="300" height="300"/>
            <img src="../img/m5.jpg" width="300" height="300"/>

        </div><!--展示图片盒子-->
        <div id="showsum">
            <!--展示图片里边-->
        </div>
        <p class="showpage">
            <a href="javascript:void(0);" id="showlast"> < </a>
            <a href="javascript:void(0);" id="shownext"> > </a>
        </p>
    </div>
    <!--conet -->
    <div class="tb-property">
        <div class="tr-nobdr">
            <h3>${product.getPname()}</h3>
        </div>
        <div class="txt">
            <span class="nowprice">￥<a href="">${product.getPrice()} 此处为价格</a></span>
            <div class="cumulative">
                <span class="number ty1">累计售出<br/><em class="add_sell_num_363">370</em></span>
                <span class="number tyu">累计评价<br/><em class="add_sell_num_363">25</em></span>
            </div>
        </div>
        <div class="txt-h">
            <span class="tex-o">上新时间</span>
            <ul class="glist" id="glist" data-monitor="goodsdetails_fenlei_click">
                <li><a href="">${product.getUpdateTime()}</a></li>
            </ul>
        </div>

        <script>
            $(document).ready(function () {
                var t = $("#text_box");
                $('#min').attr('disabled', true);
                $("#add").click(function () {
                    t.attr('value', parseInt(t.attr('value')) + 1);
                    if (parseInt(t.attr('value')) != 1) {
                        $('#min').attr('disabled', false);
                    }
                });
                $("#min").click(function () {
                    t.attr('value', parseInt(t.attr('value')) - 1);
                    if (parseInt(t.attr('value')) == 1) {
                        $('#min').attr('disabled', true);
                    }
                })
                $("#toCart").click(function () {
                    let pid = $("#Pid").attr('value')
                    let num = $("#text_box").attr('value')
                    location.href = "http://localhost:8888/car/toCart?pid=" + pid + "&num=" + num
                    return false
                })
            });
        </script>
        <div class="gcIpt">
            <span class="guT">数量</span>
            <input id="min" name="" type="button" value="-"/>
            <input id="text_box" name="" type="text" value="1" style="width:30px; text-align: center; color: #0F0F0F;"/>
            <input id="add" name="" type="button" value="+"/>
            <input id="Pid" hidden value="${product.getPid()}"/>
            <span class="Hgt">库存（99）此处为库存量</span>
        </div>
        <div class="nobdr-btns">
            <button class="addcart hu"><img src="../img/car/shop.png" width="25" height="25"/><a id="toCart">加入购物车</a>
            </button>
            <button class="addcart yh"><img src="../img/car/ht.png" width="25" height="25"/>立即购买</button>
        </div>
        <div class="guarantee">
            <span>邮费：包邮&nbsp;&nbsp;支持货到付款 <a href=""><img src="../img/car/me.png"/></a></span>
        </div>
    </div>
    <!--right -->
    <div class="extInfo">
        <div class="brand-logo">
            <a href="" title="奥影汽车影音">
                <img src="../img/sss.png"/>
            </a>
        </div>
        <div class="seller-pop-box">
            <span class="tr">荒岛书店</span>
            <span class="tr">满级店铺</span>
            <span class="tr">电话：88888888</span>
            <span class="tr hoh">
            	            		<a title="贵州大学" href="">所在地区：贵州大学</a>
            	            	</span>
        </div>
        <div class="seller-phone">
            	            	<span class="pop im">
            	            		<a href="" data-name="联系卖家"><img src="../img/car/phon.png"/>联系卖家</a>
            	            	</span>
            <span class="pop in">
            	            		<a href="" data-name="咨询卖家"><img src="../img/car/qq.png"/>咨询卖家</a>
            	            	</span>
            <span class="pop in">
            	            		<a href="" data-name="进店逛逛"><img src="../img/car/shop-line.png"/>进店逛逛</a>
            	            	</span>
            <span class="pop in">
            	            		<a href="" data-name="关注店铺"><img src="../img/car/staar.png"/>关注店铺</a>
            	            	</span>
        </div>
        <div class="jd-service">
            <a href="">
                <img src="../img/car/ho_07.png"/>
            </a>
        </div>
        <div class="suport-icons">
            <h4>扫一扫<br/>手机下单更优惠</h4>
            <img src="../imgs/h.gif" width="120" height="120"/>
        </div>
    </div>
</div>
<!-- 推荐搭配 -->
<div class="gdetail">
    <div class="dp_wrap_title">
        独家特供
    </div>
    <div class="dp_wrap">
        <!-- 结算 -->
        <div class="dq_total_wrap">
            <div class="icon_equal">
                =
            </div>
            <div class="dp_num">已经选择0个配件
                <p class="dq_price">总计<span>￥599.00</span>元</p>
                <button class="get">立即购买</button>
            </div>
        </div>
        <!-- 搭配1 -->
        <div class="dp_prd">
            <div class="icon_plus">+</div>
            <div class="dp_p_wrap">
                <a class="dp_wrap_pimg" href="" target="_blank"><img src="../img/da_1.jpg"/></a>
                <a class="dp_wrap_pname" href="" target="_blank">世说新语</a>
                <p class="dp_wrap_pprice">
                    <label>
                        <input type="checkbox" data-price="199" data-item="570b1b2f5efb114c378b4575">
                        ￥199
                    </label>
                </p>
            </div>
        </div>
        <!-- 搭配2 -->
        <div class="dp_prd">
            <div class="icon_plus">+</div>
            <div class="dp_p_wrap">
                <a class="dp_wrap_pimg" href="" target="_blank"><img src="../imgs/da_2.jpg"/></a>
                <a class="dp_wrap_pname" href="" target="_blank">中国神话故事</a>
                <p class="dp_wrap_pprice">
                    <label>
                        <input type="checkbox" data-price="199" data-item="570b1b2f5efb114c378b4575">
                        ￥199
                    </label>
                </p>
            </div>
        </div>
        <!-- 搭配3 -->
        <div class="dp_prd">
            <div class="icon_plus">+</div>
            <div class="dp_p_wrap">
                <a class="dp_wrap_pimg" href="" target="_blank"><img src="../imgs/da.jpg"/></a>
                <a class="dp_wrap_pname" href="" target="_blank">玛雅三千年</a>
                <p class="dp_wrap_pprice">
                    <label>
                        <input type="checkbox" data-price="199" data-item="570b1b2f5efb114c378b4575">
                        ￥199
                    </label>
                </p>
            </div>
        </div>
        <!-- 搭配4 -->
        <div class="dp_prd">
            <div class="icon_plus">+</div>
            <div class="dp_p_wrap">
                <a class="dp_wrap_pimg" href="" target="_blank"><img src="../imgs/a.jpg"/></a>
                <a class="dp_wrap_pname" href="" target="_blank">国礼鸡血玉</a>
                <p class="dp_wrap_pprice">
                    <label>
                        <input type="checkbox" data-price="199" data-item="570b1b2f5efb114c378b4575">
                        ￥365
                    </label>
                </p>
            </div>
        </div>
        <!-- 产品结束 -->
    </div>
</div>
</div>

<!-- 商品介紹 -->
<div class="gdetail">
    <!-- left -->
    <div class="aside">
        <h3>看了还看<span><img src="../img/car/fod.png" width="22" height="22"/>换一批</span></h3>
        <dl class="ac-mod-list">
            <dt><a href=""><img src="../imgs/c.jpg"/></a></dt>
            <dd>
                外星人日记
                <span>￥99</span>
            </dd>
        </dl>
        <dl class="ac-mod-list">
            <dt><a href=""><img src="../imgs/d.jpg"/></a></dt>
            <dd>
                天下刀宗：重刃
                <span>￥99</span>
            </dd>
        </dl>
        <dl class="ac-mod-list">
            <dt><a href=""><img src="../imgs/f.jpg"/></a></dt>
            <dd>
                人间词话
                <span>￥99</span>
            </dd>
        </dl>
    </div>
    <!-- right -->
    <script>
        var detail = document.querySelector('.detail');
        var origOffsetY = detail.offsetTop;

        function onScroll(e) {
            window.scrollY >= origOffsetY ? detail.classList.add('sticky') :
                detail.classList.remove('sticky');
        }

        document.addEventListener('scroll', onScroll);
    </script>
    <div class="detail">
        <div class="active_tab" id="outer">
            <ul class="act_title_left" id="tab">
                <li class="act_active">
                    <a href="#">商品详情</a>
                </li>
                <li>
                    <a href="#">商品介绍</a>
                </li>
                <li>
                    <a href="#">商品评价</a>
                </li>
                <li>
                    <a href="#">售后保障</a>
                </li>
            </ul>
            <ul class="act_title_right">
                <li class="mui">
                    <a id="mui-a" href="#">扫手机下单+</a>
                </li>
                <li class="mui-ac">
                    <a href="">加入购物车</a>
                </li>
            </ul>
            <div class="clear"></div>
        </div>
        <div id="content" class="active_list">
            <!--0-->
            <div id="ui-a" class="ui-a">
                <ul style="display:block;">
                    <li><p>${product.getDetail()}这里是规格参数</p></li>
                </ul>
            </div>
            <!--商品规格-->
            <div id="bit" class="bit">
                <ul style="display:block;">
                    <li><p>${product.getDetail()}这里是规格参数</p></li>
                </ul>
            </div>

            <!--商品评价-->

            <div id="ui-c" class="ui-c">
                <ul style="display:none;">
                    <li>这里是商品评价</li>
                </ul>
            </div>
            <!--售后保障-->
            <div id="uic" class="uic">
                <ul style="display:none;">
                    <li>这里是售后保障</li>
                </ul>
            </div>
        </div>
        <script>
            $(function () {
                window.onload = function () {
                    var $li = $('#tab li');
                    var $ul = $('#content ul');

                    $li.mouseover(function () {
                        var $this = $(this);
                        var $t = $this.index();
                        $li.removeClass();
                        $this.addClass('act_active');
                        $ul.css('display', 'none');
                        $ul.eq($t).css('display', 'block');
                    })
                }
            });
        </script>
    </div>
</div>

</body>
</html>

